<template>
    <view>
        <view class="bar">
            <view class="bar-item">
                <view>{{Number(nowDate().month)}}月总收入</view>
                <view>{{currentIO.i.sum.toFixed(2)}}元</view>
            </view>
            <view class="bar-item">
                <view>{{Number(nowDate().month)}}月总结余</view>
                <view>{{currentIO.i.sum-currentIO.o.sum.toFixed(2)}}元</view>
            </view>
            <view class="bar-item">
                <view>{{Number(nowDate().month)}}月总支出</view>
                <view>{{currentIO.o.sum.toFixed(2)}}元</view>
            </view>
        </view>
        <uni-swipe-action v-for="(item,index) in items" :key='index'>
            <uni-section v-if="index == 0?true:currentItemDate(items,index)!=preItemDate(items,index)" :title="item.date" sub-title="" type="line"></uni-section>
            <uni-swipe-action-item  class="bottom-line" :options="options2" @click="function(e){bindClick(e,item.id)}">
                <uni-list style="width: 100%;">
                	<uni-list-item :class="ioStyle(item.io)"  :title="String(item.name)" :note="item.comment" showArrow thumb="/static/images/dingdan_blue.png" thumb-size="lg" :rightText="String(item.maney)+' 元'" />
                </uni-list>
            </uni-swipe-action-item>
        </uni-swipe-action>
        <navigator url="../add/add" class="fab-circle">记</navigator>
    </view>
</template>

<script>
    import util from '../../common/script/util.js';
    export default {
        data() {
            return {
                currentIO:{
                    i:{sum:0},
                    o:{sum:0}
                },
                items: [
                    
                ],
                options2: [
                	{
                		text: '删除',
                		style: {
                			backgroundColor: '#dd524d'
                		}
                	}
                ],
            }
        },
        onShow() {
            util.db.initDB();
            util.db.initDB();
            
            setTimeout(()=>{
                let isOpenDB = util.db.isOpenDB();
                if (!isOpenDB) {
                    console.log("现在打");
                    util.db.openDB();
                } else {
                    console.log("已经打开了");
                }
                this.getList();
                this.getCurrentMonthI();
                this.getCurrentMonthO();
            },300)
        },
        onLoad() {
        },
        methods: {
            // showDate:function(items,index){
            //     if(index == 0){
            //         console.log("第一个");
            //         // return true;
            //         return items[index].date;
            //     }else{
            //         console.log("不是第一个");
            //         console.log(items[index].date==items[index-1].date);
            //         // return false;
            //         return items[index].date+ items[index-1].date;;
            //     }
            // },
            currentItemDate:function(items,index){
                return items[index].date;
            },
            preItemDate:function(items,index){
                return items[index-1].date;
            },
            ioStyle:function(io){
                if(io == 'i'){
                    return 'uni-list-item-i'
                }else{
                    return 'uni-list-item-o'
                }
            },
            nowDate:function(){
                return util.date.getDate();
            },
            getCurrentMonthI:function(){
                let _self = this;
                util.db.currentMonthI(
                    function(res){
                        console.log(res);
                        _self.currentIO.i = res[0]?res[0]:{sum:0};
                        console.log(_self.currentIO);
                    }
                )
            },
            getCurrentMonthO:function(){
                let _self = this;
                util.db.currentMonthO(
                    function(res){
                        console.log(res);
                        _self.currentIO.o = res[0]?res[0]:{sum:0};
                        console.log(_self.currentIO);
                    }
                )
            },
            bindClick(e,id) {
                let _self = this;
                console.log(e.index);
                
                if(e.index == 0){
                    uni.showModal({
                        title:"WD提醒您",
                        content:"是否确认删除?",
                        cancelText:"否",
                        confirmText:"是",
                        success(e) {
                            console.log(e);
                            if(e.confirm){
                                console.log("删除此条记录");
                                
                                let sql = 'delete from main_table where id = '+id;
                                console.log(sql);
                                util.db.executeSql(
                                    sql,
                                    function(success){
                                        _self.getList();
                                        _self.getCurrentMonthI();
                                        _self.getCurrentMonthO();
                                        uni.showToast({
                                            title:"删除成功!"
                                        })
                                    },
                                    function(fail){
                                        uni.showToast({
                                            title:"删除失败!"
                                        })
                                    }
                                )
                                
                            }
                            if(e.cancel){
                                console.log("我点错了");
                            }
                        }
                    })
                }
            },
            getList: function() {
                console.log("getList");
                // let sql = "select * from main_table order by id desc";
                let sql = 'select a.id,a.maney,a.type,substr(a.type,1,1) io,b.name,a.date,a.comment from main_table a,base_table_type b where a.type=b.type order by a.date desc'
                util.db.selectSQL(sql,
                    res => {
                        console.log("成功了"+JSON.stringify(res));
                        this.items = res;
                        console.log(res);
                    },
                    res => {
                        console.log("失败了"+JSON.stringify(res));
                    }
                )
            }
        }
    }
</script>

<style>
    /* 	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	} */

    .item,
    .bar {
        display: flex;
    }

    .bar {
        height: 100rpx;
        background-color: #2b85e4;
        align-items: center;
        justify-content: space-around;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
    }

    .bar-item {
        /* width: 30%; */
        color: white;
        text-align: center;
    }

    .item {
        justify-content: space-between;
        align-items: center;
    }

    .item-left {
        display: flex;
        align-items: center;
    }

    .item-img {
        width: 50rpx;
        height: 50rpx;
    }

    .item-text {
        padding-left: 22rpx;
    }

    .list {
        padding: 20px;
        font-size: 28rpx;
        line-height: 3em;
    }

    .bottom-line {
        border-bottom: 1rpx solid #eee;
    }

    .fab-circle {
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 50rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #2b85e4;
        border-radius: 50%;
        color: white;

        position: fixed;
        left: 50rpx;
        bottom: 200rpx;

        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
    }

    .fab-circle:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .uni-list-item-i >>> .uni-list-item__extra-text {
		color: #2b85e4;
        font-weight: bold;
		font-size: 28rpx;
	}
    .uni-list-item-o >>> .uni-list-item__extra-text {
    	color: #aa0000;
        font-weight: bold;
    	font-size: 28rpx;
    }
</style>
